<template>
	<view class="trade-inner" @click="closeBox">
		<view class="tab" v-if="type == 1">
			<view class="buy uni-bg-up" :class="openStatus == 2 ? 'normal' : ''" @click="onChangeType(1)">开多</view>
			<view class="sell uni-bg-down " :class="openStatus == 1 ? 'normal' : ''" @click="onChangeType(2)">开空</view>
		</view>
		<view class="tab" v-else>
			<view class="sell uni-bg-down " :class="openStatus == 1 ? 'normal' : ''" @click="onChangeType(2)">平多</view>
			<view class="buy uni-bg-up" :class="openStatus == 2 ? 'normal' : ''" @click="onChangeType(1)">平空</view>
		</view>
		<view>
			<view class="select-group uni-row">
				<view class="select-input uni-row" @click="showBox" @click.stop="showBox" @tap.stop="showBox">
					<view style="flex: 3;">
						<view class="strate-current" v-for="(item,index) in localContractStrategy" :key="index" v-if="item.active">{{item.name}}</view>
						<view class="select-box uni-column" v-show="isShowBox==1">
							<view :class="item.active ? 'select-item-active':'select-item'" v-for="(item,index) in localContractStrategy"
							 :key="index" v-if="type==1||(type==2&&item.supportClose)" @click="changeStratege(item.id)">{{item.name}}</view>
						</view>
					</view>
					<span style="flex: 1;" class="input-button">Ⅴ</span>
				</view>
				<view class="select-leverage" v-if="type==1&&balance!=null ">
					{{openStatus==1?balance.longLeverage:balance.shotLeverage}}X
				</view>
				<view class="select-leverage" v-else-if="type==2&&balance!=null">
					{{openStatus==2?balance.longLeverage:balance.shotLeverage}}X
				</view>
			</view>
			<view class="uni-column my-button-group">
				<view class="uni-row btn-group">
					<view :class="openStatus==1?'leverage-long':'leverage-short'" v-if="balance!=null">预设杠杠
						{{openStatus==1?balance.longLeverage:balance.shotLeverage}}X</view>
					<view class="mount">仓位 {{daggerPara.mountRate*100}}%</view>
				</view>
				<view :class="openStatus==1?'my-btn-long':'my-btn-short'" @click="quickOpen(openStatus==1?'BUY_LONG':'BUY_SHORT')">一键下单</view>
				<view class="my-btn-2" @click="quickClose(openStatus==1?'SELL_LONG':'SELL_SHORT')">快速平仓</view>
			</view>
		</view>
		<view class="uni-row">
			<view class="tips">风险提示:</view>
			<view class="tips-content">将撤销所有{{openStatus==1?'多':'空'}}单并重置杠杠</view>
		</view>
		<view style="margin-top:5px" v-if="balance!=null">
			<view class="contract-btn" v-if="type == 1&& openStatus==1">
				<view class="uni-h7 uni-text-gray">可用{{balance.availableQty}}</view>
				<view class="uni-h7 uni-text-gray">当前可开{{balance.longContractNum}}张 </view>
			</view>
			<view class="contract-btn" v-else-if="type == 1&& openStatus==2">
				<view class="uni-h7 uni-text-gray">可用{{balance.availableQty}}</view>
				<view class="uni-h7 uni-text-gray">当前可开{{balance.shortContractNum}}张</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: Number,
				default: 1
			},
			strategy: {
				type: Number,
				default: 1
			}

		},
		data() {
			return {
				openStatus: 1,
				leverage: null,
				balance: null,
				contract: null,
				showArrow: false,
				selectItem: 1,
				isShowBox: 0,
				localContractStrategy: null,
				daggerPara: {
					direction: '',
					mountRate: '0.1',
					mount: '',
					instrumentId: '',
					leverage: '30',
					daggerType: ''
				}
			}
		},
		// watch: {
		// 	type(val) {
		// 		this.openStatus = val
		// 	}
		// },		
		mounted() {
			this.localContractStrategy = this.ContractStrategy
			this.fresh()
			uni.$on("contractFresh", this.fresh)
			uni.$on("freshStrategy", this.freshStrategy)
			uni.$emit('orderFresh')
		},
		methods: {
			onChangeType(e) {
				this.cleanPara()
				this.openStatus = e;
				this.$emit("openStatus", e)
			},
			showBox() {
				console.log("show box")
				if (this.isShowBox == 0) {
					this.isShowBox = 1
				} else {
					this.isShowBox = 0
				}

			},
			cleanPara() {
				this.daggerPara = {
					direction: '',
					mountRate: '0.1',
					mount: '',
					instrumentId: '',
					leverage: '30',
					daggerType: ''
				}
			},
			quickOpen(direction) {
				uni.showToast({
					title:'尚未开放'
				})
				
				// this.daggerPara.instrumentId = this.getDefaultContract().instrument_id
				// this.daggerPara.direction = direction
				// this.daggerPara.leverage = this.openStatus == 1 ? this.balance.longLeverage : this.balance.shotLeverage
				// if (this.strategy == 4) {
				// 	this.daggerPara.daggerType = 'use_margin'
				// } else if (this.strategy == 5) {
				// 	this.daggerPara.daggerType = 'no_margin'
				// }

				// console.log("quick open")
				// console.log(this.daggerPara)
				// uni.showLoading({
				// 	title: "正在提交"
				// })

				// uni.request({
				// 	url: this.api + '/futures/dagger',
				// 	method: 'POST',
				// 	header: {
				// 		"Authorization": "Bearer " + this.getToken()
				// 	},
				// 	data: this.daggerPara,
				// 	success: res => {
				// 		console.log('getBalance Resp:')
				// 		console.log(res.data.data)
				// 		if (res.data.data != null) {
				// 			this.balance = res.data.data
				// 			uni.$emit('orderFresh')
				// 			this.fresh()
				// 		} else {
				// 			this.balance = null
				// 		}
				// 	},
				// 	complete() {
				// 		uni.hideLoading()
				// 	}
				// });
			},
			quickClose(direction) {
				uni.showToast({
					title:'尚未开放'
				})
				
				// uni.showLoading({
				// 	mask: true,
				// 	title: "加载中..."
				// })
				// console.log("fastClose direction " + direction)
				// uni.request({
				// 	url: this.api + '/futures/orders/quickclose?instrumentId=' + this.getDefaultContract().instrument_id +
				// 		'&direction=' + direction,
				// 	method: 'POST',
				// 	header: {
				// 		"Authorization": "Bearer " + this.getToken()
				// 	},
				// 	success: res => {
				// 		this.getPosition()
				// 	},
				// 	complete() {
				// 		uni.hideLoading()
				// 	}
				// });
			},
			closeBox() {
				console.log("close box")
				this.isShowBox = 0
			},
			changeStratege(e) {
				for (var i = 0; i < this.ContractStrategy.length; i++) {
					if (e == this.ContractStrategy[i].id) {
						this.ContractStrategy[i].active = true
					} else {
						this.ContractStrategy[i].active = false
					}
				}
				this.$emit("changeStrategy", {
					index: e
				})

			},
			getBalance() {
				uni.request({
					url: this.api + '/futures/contract/' + this.getDefaultContract().instrument_id,
					method: 'GET',
					header: {
						"Authorization": "Bearer " + this.getToken()
					},
					success: res => {
						console.log('getBalance Resp:')
						console.log(res.data.data)
						if (res.data.data != null) {
							this.balance = res.data.data
						} else {
							this.balance = null
						}
					}
				});
			},

			fresh: function() {
				this.getBalance()
			},
			freshStrategy: function() {
				console.log('freshStrategy')
				if (!this.getActive(this.localContractStrategy).supportClose) this.changeStratege(0)
			}
		}
	}
</script>

<style>
	.btn-group {
		height: 80upx;
	}

	/* .btn-group view{
		border: #000000 1px solid;
	} */

	.leverage-long {
		padding-left: 10upx;
		font-size: 28upx;
		color: #00B48E;
		font-weight: bolder;
		width: 50%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.leverage-short {
		padding-left: 10upx;
		font-size: 28upx;
		color: #D14B64;
		font-weight: bolder;
		width: 50%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.mount {
		padding-left: 10upx;
		font-size: 28upx;
		width: 50%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.my-btn-long {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 80upx;
		background-color: #00B48E;
		color: #FFFFFF;
		height: 150upx;
	}

	.my-btn-short {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 80upx;
		background-color: #D14B64;
		color: #FFFFFF;
		height: 150upx;
	}

	.my-btn-2 {
		margin-top: 20upx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 80upx;
		background-color: #ECECF6;
		color: #888888;
		height: 150upx;
	}

	.my-button-group {
		border: #CBCBCB 1px solid;
		margin-top: 20upx;
		height: 400upx;
	}

	.tips {
		font-size: 20upx;
		flex: 1;
		font-weight: bolder;
	}

	.tips-content {
		font-size: 20upx;
		flex: 3;
		color: #E60808;
	}

	.trade-inner .tab {
		position: relative;
		display: flex;
		text-align: center;
	}

	.leverage-up {
		height: 25upx;
		color: #03AF94;
		font-size: 20upx;
		padding-left: 20upx;
		font-weight: bolder;
	}

	.leverage-down {
		height: 25upx;
		color: #D40707;
		font-size: 20upx;
		padding-left: 20upx;
		font-weight: bolder;
	}

	.igroup {
		border: 1px solid #E4E3E3;
		height: 58upx;
		align-items: center;
		margin-top: 15upx;
		padding-left: 10upx;
		padding-right: 10upx;
	}

	.button-wrap {
		border: #DFDFDF 1px solid;
		height: 50upx;
		width: 22%;
		background-color: #EFF3F9;
		font-size: 20upx;
		justify-content: center;
		align-items: center;
		display: inline-flex;
		color: #A2A2A2;
	}

	.button-group {
		margin-top: 15upx;
		/* border: #000000 1px solid; */
		height: 120upx;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.igroup span {
		display: inline-flex;
		align-items: center;
		font-size: 0.8em;
	}

	.iinput {
		text-align: right;
		padding-right: 20upx;
	}

	.iholder {
		color: #A6A4A4;
	}

	.iunit {
		color: #A6A4A4;
	}

	.place {
		text-align: left;
	}

	.trade-inner .tab .buy {
		color: #ffffff;
		font-weight: bold;
		width: 50%;
		height: 50upx;
		line-height: 50upx;
	}

	.trade-inner .tab .sell {
		color: #ffffff;
		font-weight: bold;
		width: 50%;
		height: 50upx;
		line-height: 50upx;
	}

	.trade-inner .tab .normal {
		background: #ECECF6;
		color: #555555;
		font-weight: bold;
	}

	.trade-inner .tab .parallelogram {
		position: absolute;
		left: calc(50% - 19upx);
		top: 0;
		transform: translate(-50%, -50%);
		width: 36upx;
		height: 74upx;
		background: #ffffff;
		-webkit-transform: skew(-30deg);
		-moz-transform: skew(-30deg);
		-o-transform: skew(-30deg);
		transform: skew(-30deg);
	}

	.trade-inner .price-input {
		position: relative;
		margin-top: 30upx;
	}

	.trade-inner .price-input input {
		position: relative;
		padding-right: 180upx;
	}

	.trade-inner .price-input .opt {
		display: flex;
		position: absolute;
		top: 2upx;
		right: 0;
		width: 180upx;
		height: 78upx;
		line-height: 78upx;
	}

	.trade-inner .num-input {
		position: relative;
		margin-top: 30upx;
	}

	.trade-inner .price-input .opt .button {
		border: 0;
		background: #fff;
		width: 80upx;
		height: 78upx;
		line-height: 78upx;
		text-align: center;
		font-size: 48upx;
		font-weight: 400;
	}

	.trade-inner .btn {
		height: 74upx;
		line-height: 74upx;
		color: #fff;
		font-size: 28upx;
		font-weight: bold;
		margin-top: 30upx;
	}

	.contract-btn {
		display: flex;
		flex-direction: row;
	}

	.contract-btn view {
		flex: 1;
	}

	.tab-leverr {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 42upx;
	}

	.tab-leverr .lever-box {
		display: flex;
		flex-direction: row;
		border: #E1DDDD 1px solid;
		width: 48%;
	}

	.lever-box view {
		flex: 1;
		padding-left: 10px;
		color: #A6A4A4;
	}

	.lever-box view:last-child {
		text-align: right;
		padding-right: 10px;
	}
</style>
